import React, { PureComponent } from "react";
import { Balloon, Icon, Feedback } from "@icedesign/base";
import IceImg from "@icedesign/img";
import Layout from "@icedesign/layout";
import Menu from "@icedesign/menu";
import FoundationSymbol from "foundation-symbol";
import cx from "classnames";
import { Link, withRouter } from "react-router-dom";
import { headerMenuConfig } from "../../menuConfig";
import Localstorage from "./../../utils/Localstorage.js";
import Logo from "../Logo";
import "./Header.scss";
const Toast = Feedback.toast;
@withRouter
export default class Header extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.handleClose = this.handleClose.bind(this);
  }
  // 未开放的功能进行点击提示
  showNotice() {
    Toast.show({
      type: "prompt",
      size: "large",
      style: {
        background: "rgb(48, 128, 254)"
      },
      content: "该功能还没开放，再等等吧   ^_^"
    });
  }
  handleClose() {
    this.setState({
      visible: false
    });
  }
  // 退出登录
  outLogin() {
    Localstorage.delete("isLogin");
    this.props.history.push("/login");
  }
  render() {
    const { width, theme, isMobile, className, style } = this.props;
    const { visible } = this.state;
    return (
      <Layout.Header
        theme={theme}
        className={cx("ice-design-layout-header", className)}
        style={{ ...style, width }}
      >
        <Logo />
        <div
          className="ice-design-layout-header-menu"
          style={{ display: "flex" }}
        >
          {/* Header 菜单项 begin */}
          {headerMenuConfig && headerMenuConfig.length > 0 ? (
            <Menu mode="horizontal" selectedKeys={[]}>
              {headerMenuConfig.map((nav, idx) => {
                const linkProps = {};
                if (nav.newWindow) {
                  linkProps.href = nav.to;
                  linkProps.target = "_blank";
                } else if (nav.external) {
                  linkProps.href = nav.to;
                } else {
                  linkProps.to = nav.to;
                }
                return (
                  <Menu.Item key={idx}>
                    {linkProps.to ? (
                      <Link {...linkProps}>
                        {nav.icon ? (
                          <FoundationSymbol type={nav.icon} size="small" />
                        ) : null}
                        {!isMobile ? nav.name : null}
                      </Link>
                    ) : (
                      <a {...linkProps}>
                        {nav.icon ? (
                          <FoundationSymbol type={nav.icon} size="small" />
                        ) : null}
                        {!isMobile ? nav.name : null}
                      </a>
                    )}
                  </Menu.Item>
                );
              })}
            </Menu>
          ) : null}
          {/* Header 菜单项 end */}
          {/* Header 右侧内容块 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              marginTop: -2,
              letterSpacing: 1,
              color: "#fff",
              fontSize: 16
            }}
          >
            欢迎您&nbsp;
            <Icon type="smile" size="large" className="icon-down" />
          </div>
          <Balloon
            trigger={
              <div
                className="ice-design-header-userpannel"
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: 12
                }}
              >
                <IceImg
                  height={40}
                  width={40}
                  src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1850849547,2055464624&fm=27&gp=0.jpg"
                  className="user-avatar"
                />
                <div className="user-profile">
                  <span className="user-name" style={{ fontSize: "13px" }}>
                    小逸
                  </span>
                </div>
                <Icon
                  type="arrow-down-filling"
                  size="xxs"
                  className="icon-down"
                />
              </div>
            }
            closable={false}
            className="user-profile-menu"
          >
            <ul>
              <li className="user-profile-menu-item">
                <Link to="/">
                  <FoundationSymbol type="person" size="small" />我的主页
                </Link>
              </li>
              <li
                className="user-profile-menu-item set-text"
                onClick={() => {
                  this.showNotice();
                }}
              >
                {/*<Link to="/">*/}
                <FoundationSymbol type="repair" size="small" />设置
                {/*</Link>*/}
              </li>
              <li
                className="user-profile-menu-item set-text"
                onClick={() => {
                  this.showNotice();
                }}
              >
                {/*<Link to="/">*/}
                <FoundationSymbol type="mail" size="small" />反馈
                {/*</Link>*/}
              </li>
              <li
                className="user-profile-menu-item  set-text"
                onClick={() => {
                  this.outLogin();
                }}
              >
                {/*<Link to="/login">*/}
                <FoundationSymbol type="compass" size="small" />退出
                {/*</Link>*/}
              </li>
            </ul>
          </Balloon>
        </div>
      </Layout.Header>
    );
  }
}
